<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
  <div class="r">
  <div class="regOne">
      <span class="regmeter" style="font-weight:bold">{{$t('reg.meter')}}</span>
      <h5>政府部门/事业单位</h5>
  </div>
  <div class="regTwo">
    <el-form-item label="公司名称" prop="name">
      <el-input v-model="ruleForm.name" :placeholder="$t('reg.com')"></el-input>
    </el-form-item>
    <el-form-item label="地址区域" prop="name">
      <div class="linkage">
        <el-select v-model="sheng" @change="choseProvince" placeholder="省级地区">
          <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="shi" @change="choseCity" placeholder="市级地区">
          <el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="qu" @change="choseBlock" placeholder="区级地区">
          <el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </div>
    </el-form-item>

    <el-form-item label="详细地址" prop="region">
      <el-input v-model="ruleForm.address" :placeholder="$t('reg.address')"></el-input>
    </el-form-item>
    <el-form-item label="地图定位" prop="name">
      <el-input v-model="ruleForm.name" :placeholder="$t('reg.com')"></el-input>
    </el-form-item>

    <el-form-item label="组织机构代码证" prop="name">
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </el-form-item>
    <el-form-item label="营业执照">
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </el-form-item>
     </div>
    <el-form-item>
      <el-button
        type="primary"
        size="small"
        @click.native.prevent="handleLogin"
        class="login-submit"
      >{{$t('login.submit')}}</el-button>
    </el-form-item>
    </div>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import website from "@/config/website";
import axios from "axios";

export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      ruleForm: {
        menu: "",
        region: "",
        address: "",
        selectedOptions: [],
        imgList: [],
        name: ""
      },

      formInline: {
        reginon: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入公司名称", trriger: "blur" },
          { max: 30, message: "长度不超过三十个字", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请输入公司详细地址", trriger: "blur" },
          { max: 30, message: "长度不超过三十个字", trigger: "blur" }
        ]
      },

      mapJson: "../../../../static/json/map.json",
      province: "",
      sheng: "",
      shi: "",
      shi1: "",
      qu: "",
      qu1: "",
      city: "",
      block: ""
    };
  },
  methods: {
    getCityData() {
      var that = this;
      axios
        .get(this.mapJson)
        .then(function(response) {
          if (respon.status == 200) {
            var data = response.data;
            that.province = [];
            that.city = [];
            that.block = [];
            for (var item in data) {
              if (item.match(/0000$/)) {
                that.province.push({
                  id: item,
                  value: data[item],
                  childern: []
                });
              } else if (item.match(/00$/)) {
                that.city.push({ id: item, value: data[item], children: [] });
              } else {
                that.block.push({ id: item, value: data[item] });
              }
            }

            for (var index in that.province) {
              for (var index1 in that.city) {
                if (
                  that.province[index].id.slice(0, 2) ===
                  that.city[index1].id.slice(0, 2)
                ) {
                  that.province[index].children.push(that.city[index1]);
                }
              }
            }
            for (var item1 in that.city) {
              for (var item2 in that.block) {
                if (
                  that.block[item2].id.slice(0, 4) ===
                  that.city[item1].id.slice(0, 4)
                ) {
                  that.city[item1].children.push(that.block[item2]);
                }
              }
            }
          } else {
            console.log(response.status);
          }
        })
        .catch(function(error) {
          console.log(typeof +error);
        });
    },
    choseProvince: function(e) {
      for (var index2 in this.province) {
        if (e === this.province[index2].id) {
          this.shi1 = this.province[index2].children;
          this.shi = this.province[index2].children[0].value;
          this.qu1 = this.province[index2].children[0].children;
          this.qu = this.province[index2].children[0].children[0].value;
          this.E = this.qu1[0].id;
        }
      }
    },

    choseCity: function(e) {
      for (var index3 in this.city) {
        if (e === this.city[index3].id) {
          this.qu1 = this.city[index3].children;
          this.qu = this.city[index3].children[0].value;
          this.E = this.qu1[0].id;
        }
      }
    },

    choseBlock: function(e) {
      this.E = e;
    },
    created: function() {
      this.getCityDate();
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.regmeter {
  
  margin-top: 0px;
}
.regOne{
  width: 100%;
 margin-top: -51px;
    text-align: center;

}
h5{
  margin-top: 0px;
}
.regTwo{
  margin-left:360px;
}
.item__content {
  height: 20px;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  margin-top: -52px;
  width: 210px;
}

.el-form-item__label {
  text-align: right;
  float: left;
  font-size: 12px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;

  box-sizing: border-box;
}

.el-input {
  position: relative;
  font-size: 12px;
  display: inline-block;
  width: 20%;
}
.linkage {
  display: flex;
}
.el-icon-arrow-up:before {
    content: "\e6e1";
    margin-left: 47px;
}
.el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 33px;
    line-height: 33px;
    outline: 0;
    padding: 0 15px;
    
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: -5px;
}
</style>



 